<template>
  <div class="data-collection-task-card">
    <div class="header" @click.stop="closeCard">
      <span class="title">{{ title }}</span>
      <!-- <span class="close-icon" @click="closeCard">×</span> -->
    </div>
    <div class="main-content">
      <div class="total-task">
        <span class="label">任务总数:</span>
        <span class="value">{{ totalTasks }}个</span>
      </div>
      <div class="task-status">
        <div class="status-item">
          <span class="label">正在执行:</span>
          <span class="value">{{ executingTasks }}个</span>
        </div>
        <div class="status-item">
          <span class="label">等待执行:</span>
          <span class="value">{{ waitingTasks }}个</span>
        </div>
        <div class="status-item">
          <span class="label">运行成功:</span>
          <span class="value">{{ successTasks }}个</span>
        </div>
        <div class="status-item">
          <span class="label">运行失败:</span>
          <span class="value">{{ failedTasks }}个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,defineEmits } from "vue";

// 定义props接收外部传入的数据
const props = defineProps({
  title: {
    type: String,
    default: "数据采集任务",
  },
  totalTasks: {
    type: Number,
    default: 0,
    required: true,
  },
  executingTasks: {
    type: Number,
    default: 0,
  },
  waitingTasks: {
    type: Number,
    default: 0,
  },
  successTasks: {
    type: Number,
    default: 0,
  },
  failedTasks: {
    type: Number,
    default: 0,
  },
  isClosable: {
    type: Boolean,
    default: true,
  },
});

// 定义关闭卡片的方法
const emit = defineEmits(['closeTeleport'])
const closeCard = () => {
  if (props.isClosable) {
    // 这里可以添加向父组件传递关闭事件的逻辑，比如通过emit
    console.log("卡片已关闭");
    emit('closeModal')
   
  }
};
</script>

<style scoped>
.data-collection-task-card {
  /* background-color: #14263c;
  

  color: #18E1FF;
  border: 1px solid #00bfff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.3); */
  background-image: url('../../static/middle/modal.png');
   width: 395px;
   height: 173px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
 
  overflow: hidden;
  color: #18E1FF;
}

.header {
   text-align: center;
   margin-top: 5px;

}

.title {
  font-size: 20px;
}

.close-icon {
  font-size: 18px;
  cursor: pointer;
}

.main-content {
  display: flex;
  flex-direction: column;
}

.total-task {
  font-size: 24px;
  /* margin-bottom: 10px; */
  text-align: center;
}

.task-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 30px;
}

.status-item {
  width: 48%;
  margin-bottom: 10px;
}

.label {
  font-size: 18px;
}

.value {
  font-size: 18px;
}
</style>
